import React, {  useEffect, } from 'react'
import { Layout,Menu, Dropdown  } from 'antd'
import logo from '@/assets/logo.png'
import styles from './myHeader.less'
import { useSelector,useDispatch} from 'umi';
import {DownOutlined } from '@ant-design/icons'


const { Header } = Layout
const MyHeader: React.FC = () => {
    const dispatch = useDispatch();
    const {userInfo} = useSelector((state:any)=>state.user);
    console.log(userInfo);

const menu = (
    <Menu>
      <Menu.Item>
        <a target="" rel="noopener noreferrer" href="">
        个人中心
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="" rel="noopener noreferrer" href="">
        我的班级
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="" rel="noopener noreferrer" href="">
        设置
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="" rel="noopener noreferrer" href="">
        退出登录
        </a>
      </Menu.Item>
    </Menu>
  );
    useEffect(() => {
        dispatch({
            type: 'user/getUserInfo'
          })
    }, [])

 

    return <Header style={{ background: '#fff' }}>
        <img src={logo} className={styles.logo} alt="" />
        <div className={styles.tx} style={{ zIndex: 6 }}>
            <Dropdown arrow={true} overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    {userInfo && userInfo.user_name}<DownOutlined />
                </a>
            </Dropdown >
        </div>
    </Header>

}
export default MyHeader